<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox"  v-model="isAll">
    <label for="toggle-all"></label>
    <!-- 键盘绑定 enter 事件 v-model双向绑定 -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="enterFn"
      v-model="task"
    />
  </header>
</template>

<script>
export default {
  props:['arr'],
  data(){
    return{
      task:''
    }
  },
 methods:{
   enterFn(){
      // console.log(this.task);
     if(this.task.trim().length===0)return ('不能为空哦~')
    //  子传父技术  当前任务名要追加到list中
    this.$emit("create",this.task)
    // 清空输入框 
    this.task=''
   
    
   }
 },
 computed:{
   isAll:{
     set(val){
    // console.log(val);
    // 全选控制小选框
    this.arr.forEach( item=>item.isDone=val )
     },
     get(){
      //  把小选框的每一项的值赋值给全选 
       return this.arr.every(item=>item.isDone)
     }
   }
 }
}
</script>